<template>
  <dialog-form
    v-if="visible"
    width="600px"
    :title="title"
    :visible="visible"
    :form-attrs="{formData: modalFormData, renderFormItem, formButtons, labelWidth: '90px'}"
    append-to-body
    @close="handleClose"
  />
</template>

<script>
import { DialogForm } from '@/components'
import { renderFormItem, formButtons } from './config'

export default {
  name: 'PropertiesUpdate',
  components: { DialogForm },
  props: {
    title: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      renderFormItem: [],
      modalFormData: {},
      formButtons: formButtons(this.handleModalSubmit, this.handleClose),

      isHide: true
    }
  },
  watch: {
    visible() {
      if (this.visible) {
        (this.modalFormData.propertyType && this.modalFormData.propertyType === '下拉多选') && (this.isHide = false)
        this._createFormItem()
      }
    }
  },
  methods: {
    handleModalSubmit(values) {
      this.isHide = true
      this.$emit('handleModalSubmit', values)
    },

    handleClose() {
      this.isHide = true
      this.$emit('update:visible', false)
    },

    handleTypeChange(e) {
      let isHide = true
      if (e === '下拉多选' || e === '下拉单选') {
        isHide = false
      }
      this.isHide = isHide
      this._createFormItem()
    },

    _createFormItem() {
      this.renderFormItem = renderFormItem(this.handleTypeChange, this.isHide)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
